<template>
	<view class="page">
		<view class="title">
			grid布局
		</view>
		<view class="grid">
			<view class="box" v-for="(item,index) in girls" :key="item._id">
				<image :src="item.url" class="img" mode="aspectFill" @click="onPreview(index)"></image>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'

	const girls = ref([])

	const getcomment = girls.comment

	function network() {
		uni.request({
			url: "https://tea.qingnian8.com/tools/taoShow",
			data: {
				size: 10
			}
		}).then(res => {
			console.log(res);
			girls.value = res.data.data;
		});
	}

	network();

	const onPreview = (index) => {
		let imgs = girls.value.map(item => item.url);
		uni.previewImage({
			current: index,
			urls: imgs
		});
		console.log(index);
	};
</script>

<style lang="scss" scoped>
	.title {
		font-size: 30rpx;
		margin-bottom: 24rpx;
		text-align: center;
	}

	.box {
		background: #fff;
		box-shadow: 0 2px 4px #00000014;
		margin-bottom: 24rpx;
		padding: 24rpx;
		aspect-ratio: 16/9;
		word-wrap: break-word;
		overflow-wrap: break-word;
		overflow: hidden;
	}

	.grid {
		max-width: 100%;
		display: grid;
		gap: 30rpx;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
</style>